<template>
	<view class="page_box">
		<view class="head_box ">
			<yy-custom bgColor="bg-gradual-blue" v-if="0">
				<block slot="backText">返回</block>
				<block slot="content">导航栏</block>
			</yy-custom>
		</view>

		<view class="content_box padding-lr">
			<view class="logIn">请填写以下注册信息</view>

			<view class="f28 flex   " style="margin-top: 82rpx;">
				<image src="../../static/shouji.png" mode="aspectFill" class="margin-right-sm "
					style="width: 25rpx;height: 37rpx;"></image>
				<text>手机</text>
			</view>
			<view class="solid-bottom flex align-center" style="height: 76rpx; margin-top: 26rpx;">
				<input type="number" v-model="phone" value="" placeholder="请输入您的手机号" placeholder-class="ddd" />
			</view>
			<view class="f28 flex " style="margin-top: 82rpx;">
				<image src="../../static/yaozhengma.png" mode="aspectFill" class="margin-right-sm "
					style="width: 30rpx;height: 35rpx;"></image>
				<text>验证码</text>
			</view>
			<view class="solid-bottom flex align-center justify-between" style="height: 76rpx; margin-top: 26rpx;">
				<input type="number" v-model="code" value="" placeholder="请输入手机验证码" placeholder-class="ddd" />
				<text class=" f26" style="color: #FBB03B;" v-if="whetherToSnd" @click="getVerificationCd">
					获取验证码
				</text>
				<text class="f26" style="color: #FBB03B;white-space: nowrap;" v-else>
					{{ time }}s后重新获取
				</text>
			</view>
			<view class="f28 flex  " style="margin-top: 82rpx;">
				<image src="../../static/mima.png" mode="aspectFill" class="margin-right-sm "
					style="width: 27rpx;height: 37rpx;"></image>
				<text>密码</text>
			</view>
			<view class="solid-bottom flex align-center justify-between" style="height: 76rpx; margin-top: 26rpx;">
				<input v-model="pwd" type="password" value="" placeholder="请设置登录密码" placeholder-class="ddd"
					v-if="mima" />
				<input v-model="pwd" type="text" value="" placeholder="请设置登录密码" placeholder-class="ddd" v-else />
				<text class="cuIcon-attentionfill" @click="flg" v-if="mima"></text>
				<text class="cuIcon-attentionfill" @click="flg" v-else></text>
			</view>

			<view class="cu-btn btn flex justify-center align-center" @click="registered">注册</view>
			<view class="flex f22 privacyAgreement align-center justify-center">
				<image src="../../static/xz.png" mode="aspectFill" style="width: 28rpx; height: 28rpx;" v-if="check"
					@click="check = !check"></image>
				<image src="../../static/xz1.png" mode="aspectFill" style="width: 28rpx; height: 28rpx;" v-else
					@click="check = !check"></image>
				<view class="flex margin-left">
					<text>我已阅读并同意</text>
					<text style="color: #FBB03B;" @click="uni">《隐私协议》</text>
				</view>
			</view>
		</view>
		<view class="foot_box"></view>
		<!-- 登录提示 -->
		<yy-login v-if="false"></yy-login>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				check: true,
				phone: '',
				pwd: '',
				code: '',
				whetherToSnd: true,
				time: 59,
				mima: true,
				superId: '', // 上级ID
				level: '', // 下级的等级
			};
		},
		onShow(e) {

			var url = location.href;

			var temp1 = url.split('?');
			var pram = temp1[1];
			var keyValue = pram.split('&');
			var obj = {};
			for (var i = 0; i < keyValue.length; i++) {
				var item = keyValue[i].split('=');
				var key = item[0];
				var value = item[1];
				obj[key] = value;
			}
			this.superId = obj.superId;

			console.log('this.superId :>> ', this.superId);
		},
		onLoad(e) {
			this.level = e.level
		},
		methods: {
			uni() {
				uni.navigateTo({
					url: 'privacyAgreement'
				});
			},
			async flg() {
				this.mima = !this.mima;
			},
			async getVerificationCd() {
				var that = this;
				const res = await that.$u.get('/user/sendCode/' + that.phone, {}, {});

				if (res.code == 1) {
					return that.$refs.uToast.show({
						title: res.msg,
						type: 'error'
					});
				}
				that.whetherToSnd = false;
				var tt = setInterval(() => {
					that.time--;
					if (that.time <= 1) {
						clearInterval(tt);
						[that.whetherToSnd, that.time] = [true, 59];
					}
				}, 1000);
				// console.log('tt :>> ', tt);
			},
			async registered() {
				if ([this.phone, this.pwd, this.code].includes('')) {
					return this.$refs.uToast.show({
						title: '请填写完整后再注册',
						type: 'error'
					});
				}
				if (!this.$u.test.mobile(this.phone)) {
					return this.$refs.uToast.show({
						title: '请正确填写手机号码',
						type: 'error'
					});
				}
				if (!this.$u.test.code(this.code, 6)) {
					return this.$refs.uToast.show({
						title: '请正确填写验证码',
						type: 'error'
					});
				}
				let obj = {
					phone: this.phone,
					pwd: this.pwd,
					code: this.code,
					level: this.level,
					superId: Number(this.superId),
				};
				console.log('obj', obj)
				const res = await this.$u.post('user', obj, {});
				if (res.code == 0) {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success'
					});
					uni.setStorageSync('data', res.data);
					setTimeout(() => {
						// this.jump('/pages/login/login');
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}, 500);
					// if (this.superId) {
					// 	this.bindingRelationship(res.data.id);
					// }
				} else {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success'
					});
				}
			},
			async bindingRelationship(userId) {
				let obj = {
					userId,
					level: this.level,
					superId: this.superId,
				};
				const res = await this.$u.post('inviterrecord/bind', obj, {});
				if (res.code == 0) {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success'
					});
					uni.setStorageSync('data', res.data);
					setTimeout(() => {
						this.jump('/pages/login/login');
					}, 500);

				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page_box {
		.content_box {
			padding-top: 44rpx;

			.logIn {
				font-size: 40rpx;

				font-weight: bold;
				color: #232323;
			}

			.ddd {
				font-size: 24rpx;

				font-weight: 500;
				color: #bdbdbd;
			}

			/deep/input {
				width: 80%;
				font-size: 30rpx;
				font-weight: 500;
				color: #000;
			}

			.btn {
				width: 686rpx;
				height: 90rpx;
				background: #92b9b7;
				border-radius: 45rpx;
				margin-top: 195rpx;

				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}

			.privacyAgreement {
				position: fixed;
				bottom: 50rpx;
				left: 50%;
				transform: translateX(-50%);

				.check {
					display: block;
					width: 23rpx;
					height: 23rpx;
					background-color: #fbb03b;
					color: #ffffff;
				}
			}
		}
	}
</style>
